<template>
  <page-header-wrapper :title="false">
    <a-row :gutter="20">
      <a-col :span="12">
        <a-row :gutter="[0, 20]">
          <a-col :span="24">
            <a-card title="业务基本信息" :loading="loading">
              <a-descriptions
                bordered
                :column="{ md: 2 }"
              >
                <a-descriptions-item label="业务编号">
                  <b>{{ businessDetail.business_no }}</b>
                </a-descriptions-item>
                <a-descriptions-item label="合同编号">
                  <b>{{ businessDetail.contract_no }}</b>
                </a-descriptions-item>
                <a-descriptions-item label="客户姓名">
                  <b>{{ businessDetail.customer_name }}</b>
                </a-descriptions-item>
                <a-descriptions-item label="联系电话">
                  <b>{{ businessDetail.all_phone }}</b>
                </a-descriptions-item>
                <a-descriptions-item label="业务开启时间">
                  <b>{{ businessDetail.open_time }}</b>
                </a-descriptions-item>
                <a-descriptions-item label="业务大类">
                  <b>{{ businessDetail.business_category_name }}</b>
                </a-descriptions-item>
                <a-descriptions-item label="业务小类">
                  <b>{{ businessDetail.business_name }}</b>
                </a-descriptions-item>
                <a-descriptions-item label="价格">
                  <a-tag color="red">
                    {{ businessDetail.price }}
                  </a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="官费">
                  <a-tag color="red">
                    {{ businessDetail.official_fee }}
                  </a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="申请主体">
                  <b>{{ businessDetail.subject }}</b>
                </a-descriptions-item>
                <a-descriptions-item label="注册类别">
                  {{ businessDetail.sb_category }}
                </a-descriptions-item>
                <a-descriptions-item label="业务名称">
                  {{ businessDetail.sb_name }}{{ businessDetail.zl_name }}
                </a-descriptions-item>
                <a-descriptions-item label="商标注册号">
                  {{ businessDetail.sb_reg_no }}
                </a-descriptions-item>
              </a-descriptions>
            </a-card>
          </a-col>
          <a-col :span="24">
            <a-card title="业务材料" :loading="loading">
              <a-descriptions
                layout="horizontal"
                :column="{ md: 1 }"
              >
                <a-descriptions-item v-for="(item, index) in matInfo" :key="index" :label="item.mat_name">
                  <div v-if="item.type === 'image'">
                    <a :href="item.value" target="_blank" style="margin-right: 5px">
                      <img :src="item.value" width="30">
                    </a>
                    <a v-if="item.value">
                      <a-icon :style="{ fontSize: '20px', color: '#1890ff' }" type="download" @click="downFile(item.value, item.filename)"/>
                    </a>
                  </div>
                  <div v-else-if="item.type === 'file'">
                    <a v-if="item.value" :href="item.value" target="_blank" style="margin-right: 5px">
                      {{ item.filename }}
                    </a>
                  </div>
                  <b v-else>{{ item.value ? item.value : '' }}</b>
                </a-descriptions-item>
              </a-descriptions>
            </a-card>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row :gutter="[0, 20]">
          <a-col :span="24">
            <a-card title="业务流转记录" :loading="loading">
              <a-timeline>
                <a-timeline-item v-for="(item,index) in businessHistories" :key="index">
                  <p>{{ item.created_at }}</p>
                  <p>{{ item.step }}，{{ item.username }}，{{ item.notes }}</p>
                </a-timeline-item>
              </a-timeline>
            </a-card>
          </a-col>
          <a-col :span="24">
            <a-card title="业务后续进展" :loading="loading">
              <a-empty v-if="businessStates.length == 0" :description="false"/>
              <p v-for="(item,index) in businessStates" :key="index">
                <span :style="{ marginRight: '20px' }">{{ item.created_at }}</span>
                <span>
                      {{ item.state_name }}
                      <a-divider type="vertical"/>
                      <a @click="downFile(item.file_url, item.file_name)">{{ item.file_name }}</a>
                      <a-divider type="vertical"/>
                      <a @click="downFile(item.file_url, item.file_name)"><a-icon :style="{ fontSize: '16px', color: '#1890ff' }" type="download"/></a>
                    </span>
              </p>
            </a-card>
          </a-col>
          <a-col :span="24">
            <a-card title="转移记录" :loading="loading">
              <s-table
                bordered
                ref="table"
                size="middle"
                :row-key="(record,index) => index"
                :columns="moveColumns"
                :data="moveData"
              >
              </s-table>
            </a-card>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import col from '@/columns/business'
import apis from '@/api'
import { getBusinessTransfer, getDetail } from '@/api/business'

const moveColumns = col.move
export default {
  components: {
    STable
  },
  name: 'BusinessDetail',
  data () {
    return {
      moveColumns,
      moveData: parameters => {
        return getBusinessTransfer(Object.assign(parameters, this.queryParam)).then(res => {
          return res.result
        })
      },
      businessId: '',
      businessDetail: {},
      businessCategory: {},
      businessHistories: [],
      businessStates: [],
      matInfo: [],
      queryParam: {},
      loading: true
    }
  },
  activated () {
    this.queryParam['filter[cb_id]'] = this.$route.params.id
    this.getBusinessDetail(this.queryParam['filter[cb_id]'])
    this.$refs.table.refresh(true)
  },
  methods: {
    getBusinessDetail (id) {
      const app = this
      app.loading = true
      getDetail(id).then(res => {
        if (res.status === 0) {
          app.businessDetail = res.result.contract_business
          app.businessHistories = res.result.histories
          app.businessStates = res.result.states
          app.matInfo = res.result.mats
          app.loading = false
        }
      })
    },
    downFile (value, filename) {
      window.open(apis.Download + '?value=' + value + '&filename=' + filename)
    }
  }
}
</script>

<style scoped>

</style>
